<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <title>党史天天学 | 知识竞答</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="applicable-device" content="pc,mobile">
    <script>
        /*rem适配*/
        (function (deviceWidth) {
            var root = document.documentElement;
            var w = root.clientWidth;
            root.style.fontSize = (w > 720 ? 720 : w < 320 ? 320 : w) / deviceWidth * 100 + "px";
        })(750);
        if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
        } else {
        if (document.addEventListener) {
        　　　　document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
        　　} else if (document.attachEvent) {
        　　　　document.attachEvent("WeixinJSBridgeReady", handleFontSize);
        　　　　document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
        　　}
        }
        function handleFontSize() {
        　　// 设置网页字体为默认大小
        　　WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
        　　// 重写设置网页字体大小的事件
        　　WeixinJSBridge.on('menu:setfont', function () {
            WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
        });
        }
    </script>
    <link rel="stylesheet" href="https://www.12371.cn/mydsjd/h5/css/guess.css">
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://www.12371.cn/mydsjd/h5/js/wxshare.js"></script>
</head>

<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="top_nav_box">
            <div class="goback_btn"></div>
            <p class="nav_title">单人自测</p>
        </div>
        <div class="content_box">
            <!-- 时间题数 -->
            <ul class="time_number_box">
                <li>
                    <img src="https://www.12371.cn/mydsjd/h5/img/question_img.png" alt="">
                    <p>剩余题目：<span class="count" data-count="{{ count($questions) }}">0</span></p>
                </li>
                <li>
                    <img src="https://www.12371.cn/mydsjd/h5/img/time_img.png" alt="">
                    <p id="colockbox">剩余时间：<span class="minute">00</span><span>:</span><span class="second">00</span></p>
                </li>
            </ul>
            <!-- 答题区域 -->
            @foreach($questions as $question)
            <div class="problem_box"
                 style="{{ ($index == $loop->iteration) ? '' : 'display: none;' }}"
                 id="problem_box_{{$loop->iteration}}"
                 data-id="{{ $question->id }}"
                 data-type="{{ $question->type }}"
                 data-index="{{ $loop->iteration }}"
                 data-answer="{{ implode(',', $question->user_answer ?? []) }}">
                <p class="problem_type">{{ $question->type_name }}</p>

                <div class="problem_content">
                    <p class="problem_info">{{ $loop->iteration }}. {{ $question->question }}</p>
                    <ul class="problem_answer_list">
                        @if($question->type == 2)
                            <li data-id="1" class="pal_list {{ in_array('1', $question->user_answer ?? []) ? 'active' : '' }}">
                                <span class="pal_info">A. 正确</span>
                            </li>
                            <li data-id="2" class="pal_list {{ in_array('2', $question->user_answer ?? []) ? 'active' : '' }}">
                                <span class="pal_info">B. 错误</span>
                            </li>
                        @else
                            <li data-id="1" class="pal_list {{ in_array('1', $question->user_answer ?? []) ? 'active' : '' }}">
                                <span class="pal_info">A. {{ $question->option_1 }}</span>
                            </li>
                            <li data-id="2" class="pal_list {{ in_array('2', $question->user_answer ?? []) ? 'active' : '' }}">
                                <span class="pal_info">B. {{ $question->option_2 }}</span>
                            </li>
                            @if($question->option_3)
                            <li data-id="3" class="pal_list {{ in_array('3', $question->user_answer ?? []) ? 'active' : '' }}">
                                <span class="pal_info">C. {{ $question->option_3 }}</span>
                            </li>
                            @endif
                            @if($question->option_4)
                            <li data-id="4" class="pal_list {{ in_array('4', $question->user_answer ?? []) ? 'active' : '' }}">
                                <span class="pal_info">D. {{ $question->option_4 }}</span>
                            </li>
                            @endif
                        @endif
                    </ul>
                </div>
            </div>
            @endforeach


        </div>
        <!-- 底部上下一题 置灰只需要多加一个 grey -->
        <div class="bottom_box">
            <div class="last_problem">
                <div class="last_img"></div>
                <p class="last_next_info">上一题</p>
            </div>
            <div class="next_problem">
                <p class="last_next_info last_next_info1">下一题</p>
                <div class="next_img"></div>
            </div>
        </div>
    </div>
    <!-- 弹窗 -->
    <div class="guess_toast_mask" id="guess_mask" style="display: none;">
        <div class="guess_toast_style">
            <p class="gts_info">离开页面，答题将会自动提交，是否确定离开吗？</p>
            <div class="gts_btn_box">
                <div class="gts_yes">是</div>
                <div class="gts_no">否</div>
            </div>
        </div>
    </div>

<script>
var pagecode="T-003-000-000";
with(document)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("exparams","v_id=&aplus&page_code="+pagecode,id="tb-beacon-aplus",src=(location>"https"?"//js":"//js")+".data.cctv.com/__aplus_plugin_cctv.js,aplus_plugin_aplus_u.js")
</script>
</body>
<!-- <script src="{{ asset('h5/js/jquery-2.1.1.min.js') }}"></script> -->
<script src="https://www.12371.cn/mydsjd/h5/js/jquery-1.7.2.min.js"></script>
<script>
    var title = '我正在参加“党史天天学”知识竞答，快来挑战我吧！';
    getShare(title);
    $(function () {
        var count = $('.count');

        // 剩余题目数量
        count.text($('.problem_box[data-answer=]').length);

        // 最后一题显示提交按钮
        if ($('.problem_box:visible').data('index') === count.data('count')) {
            $('.next_problem').addClass('submit').text('提交');
        }

        // 第一题的上一题按钮显示灰色
        if ($('.problem_box:visible').data('index') === 1) {
            $('.last_problem').addClass('grey');
        }

        $('.pal_list').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
        })

        $(".goback_btn").on('click', function () {
            document.getElementById('guess_mask').style.display = "block";
        });
        $(".gts_no").on('click', function () {
            document.getElementById('guess_mask').style.display = "none";
        });
        $(".gts_yes").on('click', function () {
            $.ajax({
                url: '/submit',
                type: 'POST',
                async: false,
                data: {_token: '{{ csrf_token() }}'},
                dataType: 'json',
                success: function (result) {
                    window.location.href = '{{ route('index') }}';
                },
                error: function (error) {
                    window.location.href = '{{ route('index') }}';
                }
            });
        });


        // 上一题下一题
        $('.bottom_box>div').on('click', function () {
            var _this = $(this);
            var question = $('.problem_box:visible');
            var id = question.data('id');
            var index = question.data('index');
            var answer = question.data('answer');
            var choice = [];
            if (_this.hasClass('last_problem')) {
                if ((index - 1) == 1) {
                    $('.last_problem').addClass('grey');
                } else {
                    $('.last_problem').removeClass('grey');
                }
            } else {
                $('.last_problem').removeClass('grey');
                // $('.last_problem').addClass('grey');
            }

            // 修改答案
            question.find('.problem_answer_list .active').each(function () {
                choice.push($(this).data('id'));
            });

            // if (index - 1 > count.data('count') || index == count.data('count')) {
            //     window.location.href = '{{ route('guess') }}';
            // }

            if (_this.hasClass('next_problem') && choice.length === 0) {
                alert('请选择答案！');
                return;
            }

            // 提交答案
            if (_this.hasClass('next_problem') && answer != choice.join(',')) {
                // $.ajaxSettings.async = false;
                $.ajax({
                    url: '/answer/' + id,
                    type: 'POST',
                    async: false,
                    data: {_token: '{{ csrf_token() }}', answer: choice},
                    dataType: 'json',
                    success: function (result) {
                        if (result.message !== 'success') {
                            alert(result.message);
                            window.location.reload();
                            return;
                        }
                        question.attr('data-answer', choice);
                        question.data('answer', choice);
                    },
                    error: function (error) {
                        var response = eval('(' + error.responseText + ')');

                        if (response.message === 'CSRF token mismatch.') {
                            alert('您的账号已在其他地方登录！');
                        } else {
                            alert('考试异常！请联系管理员！' + response.message);
                        }

                        window.location.reload();
                    }
                });
            }

            // 最后一题交卷
            if (_this.hasClass('submit')) {
                var leftQuestion = $('.question[data-answer=]').length;
                var notice = leftQuestion ? '还有 ' + leftQuestion + " 道题未答！\n" : '';

                var r = confirm(notice + '是否确认交卷！');
                if (r === true) {
                    window.location.href = "{{ route('guess') }}";
                }
                return;
            }

            // 切换题目、切换地址栏考题序号
            if (_this.hasClass('last_problem')) {
                question.hide().prev().show();
                index = index - 1;
            } else if (_this.hasClass('next_problem')) {
                question.hide().next().show();
                index = index + 1;
            }

            // 剩余题目数量
            count.text($('.problem_box[data-answer=]').length);

            // 最后一题显示提交按钮
            if (index == count.data('count') && _this.hasClass('next_problem')) {
                $('.next_problem').addClass('submit');
                $('.last_next_info1').text('提交');
            } else {
                $('.last_next_info1').text('下一题');
                $('.next_problem').removeClass('submit');
            }
        });

        // 考试剩余时间
        var leftTime = '{{ $timeLeft }}';

        // 倒计时
        countTime();

        function countTime() {
            var hour_elem = $("#colockbox").find(".hour");
            var minute_elem = $("#colockbox").find(".minute");
            var second_elem = $("#colockbox").find(".second");
            // 定义变量 m,s 保存倒计时的时间
            var m = 0, s = 0;
            if (leftTime >= 0) {
                // // 剩余 5 分钟时弹框提示
                // if (leftTime == 299) {
                //     alert('考试还剩最后 5 分钟！');
                // }

                m = Math.floor(leftTime / 60 % 60);
                s = Math.floor(leftTime % 60);
                leftTime -= 1;
            } else {
                window.location.href = '{{ route('guess') }}';
                // alert('考试已结束，点击确定查看得分！');
                // window.location.reload();
            }

            // 展示倒计时
            $('#_m').html(m + ' 分');
            $('#_s').html(s + ' 秒');
            $(minute_elem).text(m < 10 ? "0" + m : m); //计算分钟
            $(second_elem).text(s < 10 ? "0" + s : s); //计算秒杀

            // 递归每秒调用countTime方法，显示动态时间效果
            setTimeout(countTime, 1000);
        }
    });

    // // 选择题选择事件
    // $(function () {

    // })

    // 弹窗的是否按钮
    $('.gts_yes').click(function () {
        $('.guess_toast_mask').hide()
    })
    $('.gts_no').click(function () {
        $('.guess_toast_mask').hide()
    })

    // 倒计时
    // countDown("2021/05/29 15:30:00", "#colockbox");


</script>

</html>
